<template>
  <div class="carousel-frame">
    <div class="frame">
      <div class="container" ref="piclist" v-if="data">
        <v-touch
          v-bind:pan-options="{ direction: direction, threshold: 300 }"
          v-bind:swipe-options="{ direction: direction}"
          v-on:swipeleft="handSwipe((cursor + 1 + itemCount) % itemCount, 'left')"
          v-on:swiperight="handSwipe((cursor - 1 + itemCount) % itemCount, 'right')"
          v-on:swipeup="handSwipe((cursor + 1 + itemCount) % itemCount, 'up')"
          v-on:swipedown="handSwipe((cursor - 1 + itemCount) % itemCount, 'down')"
          v-for="(item, i) in data"
          :data="item"
          :key="i"
          :class="[ 'item', 'responsively-lazy', `item${i}` ]"
        >
          <img 
            :src="item['jpg']"
            :srcset="holderPic"
            :data-srcset="item['webp']"
            :data-index="i"
            :data-direction="direction"
          >
          <p class="title" v-text="item['text']"></p>
          <span class="mask"></span>
        </v-touch>        
      </div>
    </div>
    <tap-longstrips :list-length="itemCount" :active-index="cursor" class="tap-container"></tap-longstrips>    
  </div>  
</template>
<script>
  import forEach from 'lodash.foreach'
  import holderPic from '../assets/images/holderplace.jpg'
  import TapLongstrips from './tab/stripes.vue'

  export default {
    components: { TapLongstrips },
    data () {
      return {
        holderPic,
        pause: false,
        itemCount: 4,
        cursor: 0,
        pics: []
      }
    },
    props: {
      autoplay: {
        type: Boolean,
        default: true
      },
      interval: {
        type: Number,
        default: 2000
      },
      data: {
        type: Array,
        required: true,
        default: []
      },
      direction: {
        type: String,
        default: 'horizontal'
      },
      indicators: {
        type: Boolean,
        default: true
      },
      controls: {
        type: Boolean,
        default: false
      },
      animation: {
        type: String,
        default: ''
      }
    },
    mounted () {
      this.pics = this.$refs.piclist.children || this.$refs.piclist.querySelectorAll('div')
      if (this.pics) {
        this.itemCount = this.pics.length
        this.onSwipe(this.cursor, 'left')
        // if (this.autoplay) {
        //   setTimeout(this.loop, this.interval)
        // }
      }
    },
    methods: {
      onSwipe (index = 0, directer) {
        this.cursor = index
        let indexBack
        let indexForword
        let indexCurrent
        if (directer.trim() === 'left' || directer.trim() === 'up') {
          indexBack = index + 1 > this.itemCount - 1 ? 0 : index + 1
          indexCurrent = index
          indexForword = index - 1 < 0 ? this.itemCount - 1 : index - 1
        } else if (directer.trim() === 'right' || directer.trim() === 'down') {
          indexBack = index + 1 > this.itemCount - 1 ? 0 : index + 1
          indexCurrent = index
          indexForword = index - 1 < 0 ? this.itemCount - 1 : index - 1
        }
        this.set(indexForword, indexCurrent, indexBack, directer)
      },
      set (cursorForword, cursor, cursorBack, directer) {
        forEach(this.pics, (el, i, list) => {
          if (i === cursorForword) {
            list[cursorForword].className = `item responsively-lazy before ${directer}`
          } else if (i === cursor) {
            list[cursor].className = `item responsively-lazy middle ${directer}`
          } else if (i === cursorBack) {
            list[cursorBack].className = `item responsively-lazy after ${directer}`
          } else {
            list[i].className = `item responsively-lazy blank ${directer}`
          }
        })
      },
      handSwipe (index, directer) {
        this.pause = true
        this.onSwipe(index, directer)
        setTimeout(() => {
          this.pause = false
        }, this.interval)
      },
      loop () {
        let directer = 'up'
        if (this.direction === 'horizontal') {
          directer = 'left'
        }
        if (!this.pause) {
          this.onSwipe((this.cursor + 1 + this.itemCount) % this.itemCount, directer)
        }
        setTimeout(this.loop, this.interval)
      }
    }
  }
</script>
<style lang="scss" scoped>
  $border-color: #2b60b7;
  $width: 6.38rem;

  .carousel-frame {
    height: inherit;
  }
  .frame {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    text-align: left;

    .container {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: $width * 4;
      transform: translate(-4.08rem, 0);
    }

    .item {
      top: .6rem;
      width: 6rem;
      padding: .15rem .08rem 0;
      clip-path: polygon(.96rem 0, 100% 0, 100% 105%, 0 105%, 0 .96rem);
      
      & .mask {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .45);
      }
      &::before {
        display: inline-block;
        width: 5.88rem;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: .02rem solid $border-color;
        border-radius: .06rem;
        background: linear-gradient(135deg, transparent .48rem, #295f76 0, #112036 100%);
        z-index: -1;
      }
      &.before {
        transform: translate(0, 0);
      }
      &.middle {
        transform: translate($width * 1, -.5rem);
        filter: drop-shadow(0 0 .1rem #295f76);
        & .mask {
          display: none;
        }       
      }
      &.after {
        transform: translate($width * 2, 0);
      }
      &.left.blank {
        transition-duration: 0ms;
        transform: translate($width * 3, 0);
      }
      &.right.blank {
        transition-duration: 0ms;
        transform: translate($width * -1, 0);
      }
      img {
        width: 5.78rem;
        height: 3.26rem;
        clip-path: polygon(.45rem 0, 100% 0, 100% 100%, 0 100%, 0 .45rem);
      }
      & .title {
        padding: .25rem .5rem .25rem 0;
        overflow: hidden;
        font-size: .36rem;
        text-align: center;
      }
    }
  }
  .item {
    position: absolute;
    font-size: 0;
    box-sizing: border-box;
    transition: transform 500ms linear;
    will-change: transform;

    &.left {
      &.after {
        //transition-duration: 0ms;
      }
    }
    &.right {
      &.before {
        //transition-duration: 0ms;
      }
    }
  } 
</style>
<style lang="scss">
  $border-color: #2b60b7;

  .tap-container {
    position: absolute;
    display: inline-block;
    height: .3rem;
    top: 5.4rem;
    left: 50%;
    margin-left: -1rem;
    &>.presentation {
      width: .18rem;
      height: .18rem;
      margin-right: .32rem;
      border: .03rem solid #6843e0;
      border-radius: 15%;
      &.active {
        border-color: $border-color;
        box-shadow: 0 0 0 .03rem $border-color inset;
        animation: tap-show 350ms;
        animation-fill-mode: forwards;
      }
    }
  }
  @keyframes tap-show {
    0% {
      background: transparent;
    }
    100% {
      background: #fff;
    }
  }
   
</style>
